<template>
	<view class="share" v-if="imgUrl">
		<view class="shareView">
			<image class="images" mode="widthFix" :src="imgUrl">
			</image>
		</view>
		<view class="shareBtn">
			<view class="shareBtnRgt btn" @click="saveImage">
				{{"保存相册"|i18n}}
			</view>
			<!-- <view class="shareBtnRgt btn" @click="share">
				分享好友
			</view> -->
		</view>
	</view>
</template>

<script>
	import { userSpreadPoster } from '@/api/dailyLife.js'
	export default {
		data() {
			return {
				imgUrl: ''
			};
		},
		methods: {
			/**
			 * 保存图片
			 */
			saveImage() {
				let that = this;
				// 向用户发起授权请求
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success: () => {
						// 已授权
						that.downLoadImg();
					},
					fail: () => {
						// 拒绝授权，获取当前设置
						uni.getSetting({
							success: (result) => {
								if (!result.authSetting['scope.writePhotosAlbum']) {
									that.isAuth()
								}
							}
						});
					}
				})
			},
			/**
			 * 下载资源，保存图片到系统相册
			 */
			downLoadImg() {
				uni.showLoading({
					title: ''
				});
				let that = this;
				uni.downloadFile({
					url: that.imgUrl,
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: that.$i18n["保存成功"],
										icon: "none"
									});
								},
								fail: function() {
									uni.showToast({
										title: that.$i18n["保存失败"],
										icon: "none"
									});
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: that.$i18n["保存失败"],
							icon: "none"
						});
					}
				})
			},
			/*
			 * 引导用户开启权限
			 */
			isAuth() {
				uni.showModal({
					content: this.$i18n['由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权'],
					cancelText: this.$i18n['确认'],
					confirmText: this.$i18n['取消'],
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (result) => {
									console.log(result.authSetting);
								}
							});
						}
					}
				});
			},
			// 分享/保存 图片
			share() {
				uni.downloadFile({
					url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg',
					success: (res) => {
						uni.showShareImageMenu({
							path: res.tempFilePath
						})
					}
				})
			},
			async loadPage() {
				uni.showLoading({
					title: ''
				})
				const resData = await userSpreadPoster();
				this.imgUrl = resData.data.src;
				uni.hideLoading();
			}
		},
		onLoad() {
			this.loadPage()
		}
	}
</script>

<style lang="scss">
	.share {
		.shareView {
			width: 690rpx;
			margin: 36rpx auto;

			.images {
				width: 100%;
			}
		}
		.shareBtn {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			.btn {
				width: 100%;
				// width: 336rpx;
				height: 108rpx;
				line-height: 108rpx;
				border-radius: 8rpx;
				font-size: 32rpx;
				font-weight: 500;
				text-align: center;
			}
			.shareBtnLeft {
				color: #fff;
				background: linear-gradient(180deg, #494949 0%, #232323 100%);
			}
			.shareBtnRgt {
				color: #333333;
				background: #FCD049;
			}
		}
	}
</style>
